<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单管理</title>
    <link rel="stylesheet" href="/static/xadmin/lib/layui/css/layui.css">
</head>
<body>
<div>
    <div id="app">
        <h1>订单管理</h1>
        <div class="layui-tab" lay-filter="tab">
            <ul class="layui-tab-title">
                <li @click="searchStatus('ordertype',1)" class="layui-this ">全部订单{{orderCount.total}}</li>
                <li @click="searchStatus('ordertype',2)" class="">普通订单{{orderCount.general}}</li>
                <li @click="searchStatus('ordertype',3)" class="">拼团订单{{orderCount.pink}}</li>
                <li @click="searchStatus('ordertype',4)" class="">秒杀订单{{orderCount.seckill}}</li>
                <li @click="searchStatus('ordertype',5)" class="">砍价订单{{orderCount.bargain}}</li>
            </ul>
        </div>

        <div style="display: flex;" class="layui-row">
            <label class="layui-form-label">订单状态</label>
            <div>
                <button @click="searchStatus('status',1)" type="button" class="layui-btn layui-btn-sm">
                    全部{{orderStatusCount.total}}
                </button>
                <button @click="searchStatus('status',2)" type="button" class="layui-btn layui-btn-sm">
                    未支付{{orderStatusCount.total}}
                </button>
                <button @click="searchStatus('status',3)" type="button" class="layui-btn layui-btn-sm">
                    未发货{{orderStatusCount.not_shipped}}
                </button>
                <button @click="searchStatus('status',4)" type="button" class="layui-btn layui-btn-sm">
                    待收货{{orderStatusCount.waits_delivery}}
                </button>
                <button @click="searchStatus('status',5)" type="button" class="layui-btn layui-btn-sm">
                    待评价{{orderStatusCount.evaluate}}
                </button>
                <button @click="searchStatus('status',6)" type="button" class="layui-btn layui-btn-sm">
                    交易完成{{orderStatusCount.complete}}
                </button>
                <button @click="searchStatus('status',7)" type="button" class="layui-btn layui-btn-sm">
                    待核销{{orderStatusCount.waiting_for_write_off}}
                </button>
                <button @click="searchStatus('status',8)" type="button" class="layui-btn layui-btn-sm">
                    已核销{{orderStatusCount.written_off}}
                </button>
                <button @click="searchStatus('status',9)" type="button" class="layui-btn layui-btn-sm">
                    已删除{{orderStatusCount.is_del}}
                </button>
            </div>
        </div>

        <div class="layui-row" style="margin-top: 20px">
            <label class="layui-form-label">支付方式</label>
            <button @click="searchStatus('paytype',0)" type="button" class=" layui-btn layui-btn-sm">全部</button>
            <button @click="searchStatus('paytype',1)" type="button" class=" layui-btn layui-btn-sm">微信支付</button>
            <button @click="searchStatus('paytype',2)" type="button" class=" layui-btn layui-btn-sm">支付宝支付</button>
            <button @click="searchStatus('paytype',3)" type="button" class=" layui-btn layui-btn-sm">余额支付</button>
            <button @click="searchStatus('paytype',4)" type="button" class=" layui-btn layui-btn-sm">线下支付</button>
        </div>
        <div class="layui-inline layui-row">
            <label class="layui-form-label">日期时间范围</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test10" placeholder=" - ">
            </div>
        </div>
        <table class="layui-table">
            <tr>
                <th>
                    <input type="checkbox">
                </th>
                <th>订单号</th>
                <th>用户昵称</th>
                <th>商品信息</th>
                <th>实际支付</th>
                <th>支付状态</th>
                <th>支付时间</th>
                <th>订单状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="orderList in orderLists">
                <td>
                    <input type="checkbox">
                </td>
                <td>{{orderList.order_id}}</td>
                <td>{{orderList.uname}}</td>
                <td>{{orderList.pay_price}}</td>
                <td>{{orderList.pay_type}}</td>
                <td>{{orderList.pay_time}}</td>
                <td>{{orderList.uname}}</td>
                <td>{{orderList.paid}}</td>
                <td></td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>
<script src="/static/xadmin/lib/layui/layui.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //日期时间范围
        laydate.render({
            elem: '#test10'
            , type: 'datetime'
            , range: true
        });
    })

    //实例化vue
    new Vue({
        el: '#app',
        data: {
            orderCount: [],
            orderStatusCount: [],
            orderLists: [],
            orderType: 0,
            orderStatus: []
        },
        //方法钩子
        methods: {
            searchStatus(type, value) {
                axios
                    .get('/admin/order.order/orderType?type=' + type + '&value=' + value)
                    .then(res => {
                        //设置  data里面的数据
                        this.orderLists = res.data.data.data;
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
            ///admin/order.order/orderType
            getOrderlist() {
                axios
                    .get('/admin/order.order/getOrderList')
                    .then(res => {
                        //设置  data里面的数据
                        console.log(res);
                        // console.log(res.data.data.order_count);
                        // console.log(res.data.data.order_list.data);
                        // console.log(res.data.data.order_status_count);
                        this.orderCount = res.data.data.order_count;
                        this.orderLists = res.data.data.order_list.data;
                        this.orderStatusCount = res.data.data.order_status_count;

                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
            getOrderStatus() {
                axios
                    .get('')
                    .then(res => {
                        //设置  data里面的数据
                        this.banners = res.data.data
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
            getOrderType() {
                //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
                layui.use('element', function () {
                    var element = layui.element;
                    //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
                    //监听Tab切换，以改变地址hash值  0全部 1普通 2拼团 3 秒杀 4 砍价
                    element.on('tab(tab)', function (data) {
                        var orderType = data.index
                    });
                });
            },

        },
        //调用方法钩子
        created() {
            this.getOrderlist()
            //切换选项卡 方法  获取不同的订单类型
            this.getOrderType()

        },
        updated() {
        }
    })
</script>
